<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>线路列表</title>
    <link rel="stylesheet" href="css/search.css">
</head>
<body>
<jsp:include page="header.jsp"></jsp:include>

<div class="page_one" id="list">
    <div class="contant">
        <div class="xinxi clearfix" style="margin-top: 20px">

            <div class="left">
                <!--列表-->
                <div class="header">
                    <span>商品信息</span>
                    <span class="jg">价格</span>
                </div>
                <ul>
                    <li v-for="(route,index) in routeList">
                        <div class="img"><img :src="route.rimage" width="300px" alt=""></div>
                        <div class="text1">
                            <p>{{route.rname}}</p>
                            <br/>
                            <p>{{route.description}}</p>
                        </div>
                        <div class="price">
                            <p class="price_num">
                                <span>&yen;</span>
                                <span>{{route.price}}</span>
                                <span>起</span>
                            </p>
                            <p><a :href="'route_detail.jsp?rid='+ route.rid">查看详情</a></p>
                        </div>
                    </li>

                </ul>
                <div class="page_num_inf">
                    <i></i> 共
                    <span>{{pagination.pages}}</span>页<span>{{pagination.total}}</span>条, 第<span>{{pagination.pageNum}}</span>页
                </div>

                <!--分页-->
                <div class="pageNum">
                    <ul>
                        <li><a href="" @click="indexPage(1)">首页</a></li>
                        <li class="threeword" v-if="pagination.pageNum > 1"><a href="#" @click="indexPage(pagination.prePage)">上一页</a></li>

                        <span  v-for="(page,index) in pagination.pages">
                            <li v-if="pagination.pageNum==page" class="curPage" >
                                <a   href="#" @click="indexPage(page)">{{page}}</a>
                            </li>
                            <li v-if="pagination.pageNum!=page">
                                <a  href="#" @click="indexPage(page)">{{page}}</a>
                            </li>
                        </span>
<%--                        <li><a href="page=">2</a></li>--%>
<%--                        <li><a href="#">3</a></li>--%>
<%--                        <li><a href="#">4</a></li>--%>
<%--                        <li><a href="#">5</a></li>--%>
<%--                        <li><a href="#">6</a></li>--%>
<%--                        <li><a href="#">7</a></li>--%>
<%--                        <li><a href="#">8</a></li>--%>
<%--                        <li><a href="#">9</a></li>--%>
<%--                        <li><a href="#">10</a></li>--%>
                        <li class="threeword" v-if="pagination.pageNum < pagination.pages" ><a href="javascript:;" @click="indexPage(pagination.nextPage)">下一页</a></li>
                        <li class="threeword"><a href="#" @click="indexPage(pagination.pages)">末页</a></li>
                    </ul>
                </div>
            </div>

            <!--热门推荐-->
            <div class="right">
                <div class="top">
                    <div class="hot">HOT</div>
                    <span>热门推荐</span>
                </div>
                <ul>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="left"><img src="images/04-search_09.jpg" alt=""></div>
                        <div class="right">
                            <p>清远新银盏温泉度假村酒店/自由行套...</p>
                            <p>网付价<span>&yen;<span>899</span>起</span>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script>
    let route_list = new Vue({
        el: "#list",
        data: {
            routeList:[],
            pagination: {
                pageNum: 1, //当前页
                pageSize: 5,    //每页显示条数
                total: 0        //总条数
            },
            cid:1
        },
        methods: {
            routeFindByCid(cid){
                this.cid = cid;
                axios.get("/routeServlet?action=routeFindByCid&cid="+cid,{
                    params:{
                        pageNum: this.pagination.pageNum,
                        pageSize: this.pagination.pageSize
                    }
                }).then(resp=>{
                    this.pagination = resp.data;
                    this.routeList = resp.data.list;
                    console.log(this.routeList);
                    console.log(this.pagination)
                })

            },
            indexPage(page){
                this.pagination.pageNum = page;
                this.routeFindByCid(this.cid);
            }
        },
        created() {
            let cid = location.search.split("=")[1];
            console.log(cid);
            if (cid){

                this.routeFindByCid(cid);
            }
        }
    });
</script>

<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>
